﻿@page "/{AppId:int}/{EnvironmentClusterId:int}/{ConfigObjectType:int}/Config"
@inherits MasaComponentBase

<MRow>
    <MCol Cols="2">
        <MNavigationDrawer Right Permanent Class="rounded-4" Style="height: 100%;top:0px;transform:translateX(0%);width: 100% !important;">
            <div style="padding:16px 24px; display:flex; flex-direction:column; align-items:center; overflow: hidden;">
                <div style="width:100%;" class="regular--text body2">
                    <MRow NoGutters Align="AlignTypes.Center" Justify="JustifyTypes.SpaceBetween">
                        <div class="full-width d-flex">
                            <div class="emphasis--text h6 text-overflow2">@_appDetail.Name</div>
                            <MSpacer></MSpacer>
                            @if (_enableClone)
                            {
                                <MMenu OffsetY>
                                    <ActivatorContent>
                                        <SButton Icon @attributes="@context.Attrs">
                                            <SIcon Color="black">mdi-dots-horizontal</SIcon>
                                        </SButton>
                                    </ActivatorContent>
                                    <ChildContent>
                                        <MList Dense>
                                            <MListItem Dense OnClick="()=>ShowCloneModalAsync()">
                                                <SIcon Color="#323D6F" Size="20" Class="mr-4" IsDefaultToolTip="false">far fa-copy</SIcon>
                                                <MListItemContent>
                                                    <MListItemTitle>@T("Clone config")</MListItemTitle>
                                                </MListItemContent>
                                            </MListItem>
                                        </MList>
                                    </ChildContent>
                                </MMenu>
                            }
                        </div>
                    </MRow>
                    <div class="regular3--text body2 text-overflow">
                        @if (IsAppConfig)
                        {
                            <span class="regular--text">@_appDetail.Type</span>
                            <span>&nbsp;|&nbsp;</span>
                        }
                        @_appDetail.Identity
                    </div>
                    <div style="@($"{ConfigNavStyle} overflow: auto;")">
                        @if (IsAppConfig)
                        {
                            <MRow NoGutters Class="mt-4" Style="word-break: break-all;">
                                @_appDetail.Description
                            </MRow>
                        }
                        <MRow NoGutters Class="regular3--text btn mt-6">@T("Environment")</MRow>
                        <div style="width: 100%">
                            <MChipGroup Column>
                                @foreach (var item in _appEnvs)
                                {
                                    var isSelected = _selectCluster.EnvironmentName == item.EnvironmentName;
                                    var textColor = isSelected ? "white" : "";
                                    <MChip OnClick="()=>OnEnvChipClick(item.EnvironmentName)"
                                           Outlined="@(_selectEnvName != item.EnvironmentName)"
                                           Style="@($"border:1px solid {@item.EnvironmentColor} !important;")"
                                           Color="@item.EnvironmentColor"
                                           TextColor="@textColor"
                                           Class="mr-3 mt-3 text-overflow">
                                        @item.EnvironmentName
                                    </MChip>
                                }
                            </MChipGroup>
                        </div>
                        <MRow NoGutters Class="regular3--text btn mt-6">@T("Cluster")</MRow>
                        <div style="width: 100%">
                            <MChipGroup @key="_appClusters" Column>
                                @foreach (var item in _appClusters)
                                {
                                    var isSelected = _selectCluster.ClusterName == item.ClusterName;
                                    var textColor = isSelected ? "white" : "";
                                    <MChip OnClick="()=>OnClusterChipClick(item)"
                                           Outlined="@(!isSelected)"
                                           TextColor="@textColor"
                                           Color="#323D6F"
                                           Class="mr-3 mt-3 text-overflow">
                                        @item.ClusterName
                                    </MChip>
                                }
                            </MChipGroup>
                        </div>
                    </div>
                </div>
            </div>
            @if (IsAppConfig)
            {
                <div @onclick="ShowRelationModal" style="width:100%; color:#323D6F; font-size:14px; position: fixed; right:24px; bottom: 24px;" class="d-flex justify-end hover-pointer">
                    <SIcon Size="16" Class="mr-1" IsDefaultToolTip="false">mdi-link-variant</SIcon>@T("Connect public config")
                </div>
            }
        </MNavigationDrawer>
    </MCol>
    <MCol Cols="10">
        <div style="overflow: hidden;">
            <div class="d-flex mb-3">
                <SSearch @bind-Value="_configObjectName" OnEnter="SearchConfigObject" Height="40" Dense BackgroundColor="#fff" MaxWidth="0" Placeholder="@T("Please enter the config name and press enter to query")" />
                <SButton Height="40" Width="100" BorderRadiusClass="rounded-lg" Class="ml-6" OnClick="ShowAddConfigObjectModalAsync">
                    <SIcon Class="mr-1" Small IsDefaultToolTip="false">mdi-plus</SIcon>@T("Add")
                </SButton>
            </div>
            <div class="mt-3" style="overflow:auto;position: relative; @ConfigPanelStyle">
                @if(_configObjects.Any())
                {
                    <MExpansionPanels @bind-Values="_selectPanels" Multiple Flat>
                        @foreach (var configObject in _configObjects)
                        {
                            bool disablePanel = !MasaUser.IsSuperAdmin && configObject.Encryption;
                            bool showPublish = !_selectPanels.Contains(configObject.Id) && configObject.LatestRelease != null;
                            var formatLabelCode = configObject.FormatLabelCode.Trim().ToLower();
                            if (formatLabelCode == "json")
                            {
                                <MExpansionPanel Disabled="@disablePanel" Value="configObject.Id" Class="rounded-2 my-3">
                                    <MExpansionPanelHeader Context="_" Style="height: 56px;" Class="px-6 my-4">
                                        <ChildContent>
                                            <ConfigItems ConfigObject="configObject"
                                                         Disabled="disablePanel"
                                                         ShowPublish="showPublish"
                                                         EnableClone="_enableClone"
                                                         CancelEditConfigClick="CancelEditConfigContent"
                                                         UpdateConfigClick="UpdateJsonConfigAsync"
                                                         CloneConfigClick="ShowCloneModalAsync"
                                                         ReleaseConfigClick="ShowReleaseModalAsync"
                                                         ReleaseHistoryClick="ShowReleaseHistoryAsync"
                                                         RollbackClick="ShowRollbackModalAsync"
                                                         RemoveClick="RemoveAsync"
                                                         RevokeClick="RevokeAsync" />
                                        </ChildContent>
                                        <ActionsContent>
                                            <SIcon Color="#485585" IsDefaultToolTip="false">
                                                mdi-chevron-down
                                            </SIcon>
                                        </ActionsContent>
                                    </MExpansionPanelHeader>
                                    <MExpansionPanelContent>
                                        @if (configObject.FromRelation && configObject.RelationConfigObjectId != 0)
                                        {
                                            <div class="mb-2">
                                                <SIcon Size="18" Color="#7681AB" IsDefaultToolTip="false">mdi-link-variant</SIcon>
                                                <span style="font-size: 14px; color: #7681AB;">
                                                    @T("Connected")
                                                    <span class="regular3--text btn mx-1 font-size: 6px !important;">|</span>
                                                    @(configObject.IsPublished ? @T("Released") : @T("UnReleased"))
                                                </span>
                                            </div>
                                        }
                                        else if (configObject.FromRelation && configObject.RelationConfigObjectId == 0)
                                        {
                                            <div class="mb-2">
                                                <SIcon Size="18" Color="#7681AB" IsDefaultToolTip="false">mdi-link-variant-off</SIcon>
                                                <span style="font-size: 14px; color: #7681AB;">@T("Covered")</span>
                                            </div>
                                        }
                                        <MonacoEditor ReadOnly="!configObject.IsEditing" @bind-Value="@configObject.Content" Language="@formatLabelCode" />
                                    </MExpansionPanelContent>
                                </MExpansionPanel>
                            }
                            else if (formatLabelCode == "properties")
                            {
                                <MExpansionPanel Disabled="@disablePanel" Value="configObject.Id" Class="rounded-lg my-3">
                                    <MExpansionPanelHeader Context="_" Style="height: 56px;" Class="px-6 my-4">
                                        <ChildContent>
                                            <ConfigItems ConfigObject="configObject"
                                                         Disabled="disablePanel"
                                                         EnableClone="_enableClone"
                                             ShowPublish="showPublish"
                                             CancelEditConfigClick="CancelEditConfigContent"
                                                         UpdateConfigClick="(config) => { ShowPropertyModal(config, config.ConfigObjectPropertyContents); }"
                                                         CloneConfigClick="ShowCloneModalAsync"
                                                         ReleaseConfigClick="ShowReleaseModalAsync"
                                                         ReleaseHistoryClick="ShowReleaseHistoryAsync"
                                                         RollbackClick="ShowRollbackModalAsync"
                                                         RemoveClick="RemoveAsync"
                                                         RevokeClick="RevokeAsync" />
                                        </ChildContent>
                                        <ActionsContent>
                                            <SIcon Color="#485585" IsDefaultToolTip="false">
                                                mdi-chevron-down
                                            </SIcon>
                                        </ActionsContent>
                                    </MExpansionPanelHeader>
                                    <MExpansionPanelContent>
                                        @if (configObject.RelationConfigObjectId != 0)
                                        {
                                            <MCard Style="border:1px solid #E2E7F4;" Class="py-2 mt-4 rounded-lg">
                                                <SDataTable FixedHeader
                                                            Style="max-height: 312px; overflow: auto; border-radius: unset !important;"
                                                            Headers="Headers"
                                                            SortDesc="true"
                                                            SortBy="new List<string>{ nameof(ConfigObjectPropertyModel.IsPublished) }"
                                                            TItem="ConfigObjectPropertyModel"
                                                            Items="@configObject.ConfigObjectPropertyContents"
                                                            Class="table-border-none"
                                                            HideDefaultFooter>
                                                        <HeaderColContent Context="header">
                                                            <span class="regular3--text btn">@header.Text</span>
                                                        </HeaderColContent>
                                                        <ItemColContent>
                                                            @switch (context.Header.Value)
                                                            {
                                                                case nameof(ConfigObjectPropertyModel.IsPublished):
                                                                    string icon = context.Item.IsRelationed ? "mdi-link-variant" : "mdi-link-variant-off";
                                                                    string color = "";
                                                                    string text = "";
                                                                    @if (context.Item.IsPublished)
                                                                    {
                                                                        color = "#05CD99";
                                                                        text = @T("Released");
                                                                    }
                                                                    else
                                                                    {
                                                                        color = "#7681AB";
                                                                        text = @T("UnReleased");
                                                                    }
                                                                    <SIcon Style="margin-bottom:2px;" Class="mr-1" Size="20" Color="@color" IsDefaultToolTip="false">@icon</SIcon>
                                                                    <span style="color: @color;">@text</span>
                                                                    break;
                                                                case "Operation":
                                                                    <MButton Class="mr-3" Icon OnClick="()=>ShowPropertyModal(configObject, null, context.Item)">
                                                                        <SIcon Color="#485585" Size="20">
                                                                            mdi-pencil
                                                                        </SIcon>
                                                                    </MButton>
                                                                    break;
                                                                case nameof(ConfigObjectPropertyModel.ModificationTime):
                                                                    <DateTimeZone Value="@context.Item.ModificationTime" />
                                                                    break;
                                                                default:
                                                                    <div style="width: 135px;" class="text-overflow">@context.Value</div>
                                                                    break;
                                                            }
                                                        </ItemColContent>
                                                    </SDataTable>
                                            </MCard>
                                        }
                                        else
                                        {
                                            <SElevationTab Tab="@T(configObject.ElevationTabPropertyContent.TabText)"
                                                           Left
                                                           TabChanged="tabText=>HandleTabIndexChanged(tabText, configObject)"
                                                           TabMinWidth="70"
                                                           ItemsClass="rounded-2"
                                                           Dense
                                                           Tabs="@(new List<string>{ T("Table"), T("Text") })">
                                                    <SElevationTabItem>
                                                        <MCard Style="border:1px solid #E2E7F4; padding: 1px;" Class="py-2 mt-4 rounded-lg">
                                                            <SDataTable FixedHeader
                                                                        Style="max-height: 312px; overflow: auto; border-radius: unset !important;"
                                                                        Headers="Headers"
                                                                        SortDesc="true"
                                                                        SortBy="new List<string>{ nameof(ConfigObjectPropertyModel.IsPublished) }"
                                                                        TItem="ConfigObjectPropertyModel"
                                                                        Items="@configObject.ConfigObjectPropertyContents"
                                                                        Class="table-border-none"
                                                                        HideDefaultFooter>
                                                                <HeaderColContent Context="header">
                                                                    <span class="regular3--text btn">@header.Text</span>
                                                                </HeaderColContent>
                                                                <ItemColContent>
                                                                    @switch (@context.Header.Value)
                                                                    {
                                                                        case nameof(ConfigObjectPropertyModel.IsPublished):
                                                                            <div class="d-inline-flex m-0 p-0 text-overflow">
                                                                                @if (context.Item.IsPublished)
                                                                                {
                                                                                    <SIcon Class="mr-1" Style="margin-bottom:2px;color: #05CD99 !important;" Size="16" IsDefaultToolTip="false">mdi-link-variant</SIcon>
                                                                                    <span class="green--text">@T("Released")</span>
                                                                                }
                                                                                else
                                                                                {
                                                                                    if (context.Item.IsAdded)
                                                                                    {
                                                                                        <SIcon Class="mr-1" Style="margin-bottom:2px;color:#A3AED0 !important;" Size="16" IsDefaultToolTip="false">mdi-plus</SIcon>
                                                                                    }
                                                                                    else if (context.Item.IsEdited)
                                                                                    {
                                                                                    <SIcon Class="mr-1" Style="margin-bottom:2px;color:#A3AED0 !important;" Size="16" IsDefaultToolTip="false">mdi-pencil</SIcon>
                                                                                    }
                                                                                    else if (context.Item.IsDeleted)
                                                                                    {
                                                                                    <SIcon Class="mr-1" Style="margin-bottom:2px;color: #A3AED0 !important;" Size="16" IsDefaultToolTip="false">mdi-delete</SIcon>
                                                                                    }
                                                                                    <span>@T("UnReleased")</span>
                                                                                }
                                                                            </div>
                                                                            break;
                                                                        case "Operation":
                                                                            @if (!context.Item.IsDeleted)
                                                                            {
                                                                                <div class="d-flex">
                                                                                    <MButton Class="mr-3" Icon OnClick="()=>ShowPropertyModal(configObject, null, context.Item)">
                                                                                        <SIcon Size="20" Color="#485585" Class="align-self-center">mdi-pencil</SIcon>
                                                                                    </MButton>
                                                                                    <MButton Class="mr-3" Icon OnClick="()=>DeleteConfigObjectPropertyContentAsync(context.Item, configObject.Id)">
                                                                                        <SIcon Size="20" Style="color: #FF5252 !important;" Class="align-self-center">mdi-delete</SIcon>
                                                                                    </MButton>
                                                                                </div>
                                                                            }
                                                                            break;
                                                                        case nameof(ConfigObjectPropertyModel.ModificationTime):
                                                                            <DateTimeZone Value="@context.Item.ModificationTime" />
                                                                            break;
                                                                        default:
                                                                            <div style="width: 135px;" class="text-overflow">@context.Value</div>
                                                                            break;
                                                                    }
                                                                </ItemColContent>
                                                            </SDataTable>
                                                        </MCard>
                                                    </SElevationTabItem>
                                                    <SElevationTabItem>
                                                        <div class="d-flex justify-end">
                                                            @if (configObject.ElevationTabPropertyContent.Disabled)
                                                            {
                                                                <SButton Class="mr-4" OnClickStopPropagation Icon OnClick="()=>CancelEditConfigContent(configObject)">
                                                                    <SIcon Tooltip="@T("Cancel")" Color="#323D6F">mdi-close-thick</SIcon>
                                                                </SButton>
                                                            }
                                                            @if (!configObject.ElevationTabPropertyContent.Disabled)
                                                            {
                                                            <SButton OnClickStopPropagation Icon Class="mr-4 mb-2" OnClick="()=>{ configObject.ElevationTabPropertyContent.Disabled = !configObject.ElevationTabPropertyContent.Disabled; }">
                                                                    <SIcon Tooltip="@(T("Edit"))" Class="hover-pointer" Color="#323D6F">mdi-pencil</SIcon>
                                                                </SButton>
                                                            }
                                                            else
                                                            {
                                                            <SButton OnClickStopPropagation Icon Class="mr-4 mb-2" OnClick="()=>TextConvertPropertyAsync(configObject.Id)">
                                                                    <SIcon Tooltip="@(T("Save"))" Color="success">mdi-check</SIcon>
                                                                </SButton>
                                                            }
                                                        </div>
                                                        <MonacoEditor ReadOnly="!configObject.ElevationTabPropertyContent.Disabled" @bind-Value="@configObject.ElevationTabPropertyContent.Content" Language="text/plain" />
                                                    </SElevationTabItem>
                                            </SElevationTab>
                                        }
                                    </MExpansionPanelContent>
                                    <hr class="mx-6" style="background: none repeat scroll 0 0 #E9EDF7; border: thin none; height: 1px;" />
                                </MExpansionPanel>
                            }
                            else
                            {
                                <MExpansionPanel Disabled="@disablePanel" Value="configObject.Id" Class="rounded-2 my-3">
                                    <MExpansionPanelHeader Context="_" Style="height: 56px;" Class="px-6 my-4">
                                        <ChildContent>
                                            <ConfigItems ConfigObject="configObject"
                                                         Disabled="disablePanel"
                                             ShowPublish="showPublish"
                                             EnableClone="_enableClone"
                                                         CancelEditConfigClick="CancelEditConfigContent"
                                                         UpdateConfigClick="UpdateOtherConfigObjectContentAsync"
                                                         CloneConfigClick="ShowCloneModalAsync"
                                                         ReleaseConfigClick="ShowReleaseModalAsync"
                                                         ReleaseHistoryClick="ShowReleaseHistoryAsync"
                                                         RollbackClick="ShowRollbackModalAsync"
                                                         RemoveClick="RemoveAsync"
                                                         RevokeClick="RevokeAsync" />
                                        </ChildContent>
                                        <ActionsContent>
                                            <SIcon Color="#485585" IsDefaultToolTip="false">
                                                mdi-chevron-down
                                            </SIcon>
                                        </ActionsContent>
                                    </MExpansionPanelHeader>
                                    <MExpansionPanelContent>
                                        @if (configObject.FromRelation && configObject.RelationConfigObjectId != 0)
                                        {
                                            <div class="mb-2">
                                                <SIcon Size="18" Color="#7681AB" IsDefaultToolTip="false">mdi-link-variant</SIcon>
                                                <span style="font-size: 14px; color: #7681AB;">
                                                    @T("Connected")
                                                    <span class="regular3--text btn mx-1 font-size: 6px !important;">|</span>
                                                    @(configObject.IsPublished ? @T("Released") : @T("UnReleased"))
                                                </span>
                                            </div>
                                        }
                                        else if (configObject.FromRelation && configObject.RelationConfigObjectId == 0)
                                        {
                                            <div class="mb-2">
                                                <SIcon Size="18" Color="#7681AB" IsDefaultToolTip="false">mdi-link-variant-off</SIcon>
                                                <span style="font-size: 14px; color: #7681AB;">@T("Covered")</span>
                                            </div>
                                        }
                                        <MonacoEditor ReadOnly="!configObject.IsEditing" @bind-Value="@configObject.Content" Language="@configObject.FormatLabelCode.ToLower()"></MonacoEditor>
                                    </MExpansionPanelContent>
                                    <hr class="mx-6" style="background: none repeat scroll 0 0 #E9EDF7; border: thin none; height: 1px;" />
                                </MExpansionPanel>
                            }
                        }
                    </MExpansionPanels>
                }
                else
                {
                    <SEmptyPlaceholder />
                }
                <MRow>
                    <MOverlay Class="rounded-4" Value="_showProcess" Absolute Color="#fff" Opacity="1.0">
                        <MProgressCircular Width="4" Indeterminate Size="48" Color="primary"></MProgressCircular>
                    </MOverlay>
                </MRow>
            </div>
        </div>
    </MCol>
</MRow>

<AddConfigObjectModal @ref="_addConfigObjectModal" AppDetail="_appDetail"
    ConfigObjectType="ConfigObjectType"
    OnSubmitAfter="()=>GetConfigObjectsAsync(_selectCluster.Id, ConfigObjectType)">
</AddConfigObjectModal>

<SSheetDialog EnableDomReload Value="_propertyConfigModal.Visible" ValueChanged="PropertyConfigModalValueChanged" Title="@_propertyConfigDialogTitle" Icon="mdi-circle" IconColor="success">
    <MForm Class="full-height" Context="formContext" EnableValidation Model="_propertyConfigModal.Data">
        <div class="d-flex flex-column" style="width:100%; height:100%; padding: 48px 228px">
            <div>
                <div class="emphasis--text h6 d-flex align-center">
                    @_selectConfigObject.Name
                    <span class="ml-3 regular3--text btn">|</span>
                    <sapn class="ml-2 regular3--text btn">Properties</sapn>
                </div>
                <STextField Class="mt-12" Disabled="_propertyConfigModal.HasValue" Label="Key" Outlined @bind-Value="_propertyConfigModal.Data.Key"></STextField>
                <STextField Class="mt-6" Label="Value" Outlined @bind-Value="_propertyConfigModal.Data.Value"></STextField>
                <MTextarea Class="mt-6" Label="@T("Description")" Dense Outlined @bind-Value="_propertyConfigModal.Data.Description"></MTextarea>
            </div>
            <div class="d-flex justify-end align-end" style="width:100%; height:100%;">
                <SButton Small Color="primary" Width="100" OnClick="()=>SubmitPropertyConfigAsync(formContext)">@(_propertyConfigModal.HasValue ? T("Save") : T("Submit"))</SButton>
            </div>
        </div>
    </MForm>
</SSheetDialog>

<ReleaseModal @bind-Value="@_showReleaseModal"
              Content="@_configObjectReleaseContent"
              AppDetail="@_appDetail"
              SelectConfigObject="@_selectConfigObject"
              SelectCluster="@_selectCluster"
              SelectConfigObjectAllProperties="@_selectConfigObjectAllProperties"
              OnSubmitAfter="async ()=>{ await GetConfigObjectsAsync(_selectCluster.Id, ConfigObjectType); }" />

<RollbackModal @bind-Value="_showRollbackModal"
               FormatLabelCode="@_releaseHistory.FormatLabelCode"
               CurrentConfigObjectRelease="@(_releaseHistory.ConfigObjectReleases.FirstOrDefault() ?? new())"
               RollbackConfigObjectRelease="@(_releaseHistory.ConfigObjectReleases.LastOrDefault() ?? new())"
               OnClick="RollbackAsync" />

<ReleaseHistoryModal @ref="_releaseHistoryModal"
                     OnSubmitAfter="async ()=>{ await GetConfigObjectsAsync(_selectCluster.Id, ConfigObjectType); }" />

<CloneModal @ref="_cloneModal"
            ConfigObjects="GetCloneConfigObjects()"
            SelectCluster="_selectCluster"
            ConfigObjectType="ConfigObjectType"
            AppDetail="_appDetail"
            ProjectDetail="_projectDetail"
            OnSubmitAfter="async ()=>{ await GetConfigObjectsAsync(_selectCluster.Id, ConfigObjectType); }">
</CloneModal>

<RelationModal @ref="_relation" AppDetail="_appDetail" OnSubmitAfter="()=>GetConfigObjectsAsync(_selectCluster.Id,ConfigObjectType)" />
